<template>
	<view class="tyd-date">
		<uni-popup ref="popRef" background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false" type="bottom" :custom="true" :mask-click="true" >
			<view class="pop-content ">
				<view class="header c-flex jc-between">
					<view  @tap='sure(0)'>{{cancelLabel}}</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="w-picker-view" v-if="mode=='date'">
					<picker-view  :indicator-style="indicatorStyle" :value="pickVal" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="picker-view" >
							<picker-view-column>
									<view class="c-flex item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
									<view class="c-flex item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
									<view class="c-flex item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
					</picker-view>
				</view>	
				<view class="w-picker-view" v-if="mode=='yearMonth'">
					<picker-view  :indicator-style="indicatorStyle" :value="pickVal" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="picker-view">
						<picker-view-column>
							<view class="c-flex item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="c-flex item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="w-picker-view" v-if="mode=='year'">
					<picker-view  :indicator-style="indicatorStyle" :value="pickVal" @change="onDateChange" @pickstart="pickstart" @pickend="pickend" class="picker-view">
						<picker-view-column>
							<view class="c-flex item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	function oneOf (value, validList) {
		for (let i = 0; i < validList.length; i++) {
		  if (value === validList[i]) {
			return true;
		  }
		}
		throw new Error('mode无效，请选择有效的mode!');
		return false;
	}
	const forMatNum=(num)=>{
		return num<10?'0'+num:num+'';
	}
	export default{
		props:{
			startYear:{
				type:[String,Number],
				default(){
					return "2020"
				}
			},
			endYear:{
				type:[String,Number],
				default(){
					return new Date().getFullYear()+''
				}
			},
			mode:{
				type:String,
				validator(mode){
					let modeList=['date','yearMonth','year'];//过滤无效mode;
					return oneOf(mode,modeList);
				},
				default(){
					return "date"
				}
			},
			current:{
				type:Boolean,
				default:false
			},
			value:{
				type:Array,
				default(){
					return null
				}
			},
			
			cancelLabel:{
				type:String,
				default:'取消'
			},
			chooseValue:{
				type:[String,Number],
				default(){
					return ""
				}
			}
		},
		data(){
			return {
				indicatorStyle:`height: 40px;`,
				years:[],
				year:'',
				months:[],
				month:'',
				days:[],
				day:'',
				pickVal:[],
				tempVal:[],
				visible: true,
				isMoving:false,
			}
		},
		mounted() {
			this.initData();
		},
		methods:{
			show(){	
				this.$refs.popRef.open('bottom');
			},
			initData(){
				let _this=this;
				let data={};
				let mode=_this.mode;
				let year,month,day;
				let currDate = new Date();
				let initstartDate=new Date(_this.startYear.toString());
				let endDate=new Date(_this.endYear.toString());
				if(_this.startYear>_this.endYear){
					initstartDate=new Date(_this.endYear.toString());
					endDate=new Date(_this.startYear.toString());
				};
				let startYear=initstartDate.getFullYear();
				let startMonth=initstartDate.getMonth()+1;
				let endYear=endDate.getFullYear();
				let years=[],months=[],days=[];
				let curMonth= currDate.getMonth();
				let dDate = currDate.getDate();
				let pickVal = [];
				switch(mode){
					case "date":
					for(let s=startYear;s<=endYear;s++){
						if(this.current && (s == endYear)){
							pickVal.push(s-startYear);
						}
						years.push(s+'');
					};
					for(let m=1;m<=12;m++){
						if(this.current && (m == curMonth+1)){
							pickVal.push(m-1);
						}
						months.push(forMatNum(m));
					};
					for(let d=1;d<=dDate;d++){
						days.push(forMatNum(d));
					}
					break;
					case "year":
						for(let s=startYear;s<=endYear;s++){
							if(this.current && (s == endYear)){
								pickVal.push(s-startYear);
							}
							years.push(s+'');
						};
						
						break;
					case "yearMonth":
						for(let s=startYear;s<=endYear;s++){
							if(this.current && (s == endYear)){
								pickVal.push(s-startYear);
							}
							years.push(s+'');
						};
						for(let m=1;m<=12;m++){
							if(this.current && (m == curMonth+1)){
								pickVal.push(m-1);
							}
							months.push(forMatNum(m));
						};
						for(let d=1;d<=dDate;d++){
							days.push(forMatNum(d));
						}
						break;
				}
				this.years = years;
				this.months = months;
				this.days = days;
				this.$nextTick(()=>{
					this.pickVal = pickVal;
					this.tempVal = [...pickVal];
					console.log('init-val',this.pickVal)
					this.setDate(pickVal);
					if(this.mode=='year'){
						for(let i=0;i<this.years.length;i++){
						
							if(this.chooseValue ==this.years[i]){
									console.log('000',this.chooseValue)
								this.pickVal =[i];
								this.year = this.chooseValue
							}
						}
						
					}
				})
			},
			
			onSeleDate(){
				this.visible = true;
				this.$refs.popRef.open('bottom');
			},
			//日期选择
			onDateChange(e){
				this.tempVal = e.detail.value
				console.log('选中：',e)
				this.setDate(this.tempVal);
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			setDate(val){
				switch(this.mode){
					
					case 'date':
					console.log(this.mode)
					this.year = this.years[val[0]]
					this.month = this.months[val[1]]
					this.day = this.days[val[2]]
					break;
					case 'yearMonth':
					this.year = this.years[val[0]]
					this.month = this.months[val[1]]
					break;
					case 'year':
					this.year = this.years[val[0]]
					
					break;
				}
			},
			sure(type){
				if (this.isMoving) {
						console.log('运动中，不能点击哦')
						return;
				}
				if(type == 1){
					this.setDate(this.tempVal);
					// let dateStr = `${this.year}-${this.month}-${this.day}`;
					this.date = {year:this.year,month:this.month,day:this.day};
					
					console.log('-----',this.date)
					this.$emit('dateChange',this.date);
				}else{
					this.$emit('clear','')
				}
				this.$refs.popRef.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tyd-date{
		position: relative;
		.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
		.pop-content{
			background: #fff;border-top-left-radius: 30rpx;z-index: 99999999;
			border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
			.header{
				font-size: 28rpx;font-weight: 500;padding: 30rpx;
				view:first-child{color:#666666;}
				view:last-child{color: #2986FF;}
				background-color: transparent;
			}
			
			.item {height: 50px;align-items: center;justify-content: center;text-align: center;}
		}
	}
	
</style>